<%-- 
    Document   : PersonalPlan
    Created on : Nov 24, 2009, 4:34:34 PM
    Author     : jo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        
        <link rel="Stylesheet" type="text/css" href="./extjs3.0/resources/css/ext-all.css"/>    
        <script type="text/javascript" src="./extjs3.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="./extjs3.0/ext-all-debug.js"></script>

        <link rel="Stylesheet" type="text/css" href="./css/personal-plan.css"/>
        <script src="http://maps.google.com/maps?file=api&amp;v=2.123&amp;sensor=true_or_false&amp;key=ABQIAAAAhbK0bB4X0coDRvteLsuB4hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQpmT1hJwOBERgCUEIUqHgpno4rqw" type="text/javascript"></script>  
        <script type="text/javascript" src="./js/Event.js"></script>
        <script type="text/javascript" src="./js/Plan.js"></script>
        <script type="text/javascript" src="./js/personal-plan/personal-plan-map.js"></script>
        <script type="text/javascript" src="./js/personal-plan/personal-plan-init.js"></script>
        <script type="text/javascript" src="./js/personal-plan/personal-plan-display-event.js"></script>
        <script type="text/javascript" src="./js/personal-plan/personal-plan-event-forms.js"></script>
        <script type="text/javascript" src="./js/personal-plan/personal-plan-drag.js"></script>
        <script type="text/javascript" src="./js/personal-plan/personal-plan-save.js"></script>
        <script type="text/javascript" src="./js/personal-plan/personal-plan-load.js"></script>
        <script type="text/javascript" src="./js/personal-plan/personal-plan-delete.js"></script>
        <script type="text/javascript">
            var planid = "<%= request.getParameter("planid")%>";
            var userid = "<%= request.getParameter("userid")%>";
            //alert(planid);
            var data;
            var plan;
            var eventInfoArray = new Array();
            
            var map;
            var geocoder;           
            var highlighted_marker = null;
            var point_markers = [];         
        </script>
        
        <title>Personal Plan - Plan your trip here!</title>
    </head>
    <body tracingsrc="personalPlan1.png" tracingopacity="60">
<table width="1000" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="1000" height="411" colspan="4" align="left" valign="top"><img src="image/plan/top.gif" width="1000" height="411"/></td>
  </tr>
  <tr>
    <td width="51" height="514" rowspan="2" align="left" valign="top">&nbsp;</td>
    <td width="180" rowspan="2" align="left" valign="top">

	<table width="180" border="0" cellspacing="0" cellpadding="0">
	<div id="events">
      <tr align="center" valign="middle">
        <td width="60" height="70" valign="middle"><div id="eventtype1" class="event"><img src="image/plan/home.gif" width="50" height="50" ext:qtitle="hotel"></div></td>
        <td width="60" height="70" valign="middle"><div id="eventtype2" class="event"><img src="image/plan/food.gif" width="50" height="50"></div></td>
        <td width="60" height="70" valign="middle"><div id="eventtype3" class="event"><img src="image/plan/visit.gif" width="50" height="50"></div></td>
      </tr>
      <tr align="center" valign="middle">
        <td width="60" height="63"> <div id="eventtype4" class="event"><img src="image/plan/direction.gif" width="50" height="50"></div></td>
        <td width="60" height="63"> <div id="eventtype5" class="event"><img src="image/plan/shopping.gif" width="50" height="50"></div></td>
        <td width="60" height="63"> <div id="eventtype6" class="event"><img src="image/plan/entertainment.gif" width="50" height="50"></div></td>
      </tr>
      <tr align="center" valign="middle">
        <td width="60" height="63"> <div id="eventtype7" class="event"><img src="image/plan/undecided.gif" width="50" height="50"></div></td>
        <td width="60" height="63"> <div id="eventtype8" class="event"><img src="image/plan/note.gif" width="50" height="50"></div></td>
        <td>&nbsp;</td>
      </tr>
	  </div>

	  <form name="form1" method="get" action="">
	  <tr valign="bottom">
	    <td width="180" height="29" colspan="3"><img src="image/plan/planName.gif" width="83" height="19"></td>
	  </tr>
	  <tr>
	    <td colspan="3" width="180" height="32"><input name="planname" type="text" id="planname" size="25"/></td>
	  </tr>
	  <tr valign="bottom">
	    <td width="180" height="27" colspan="3"><img src="image/plan/description.gif" width="83" height="19"></td>
	  </tr>
	  <tr align="left" valign="bottom">
	    <td width="180" height="188" colspan="3"><textarea id="plandescription" cols=25 rows=12></textarea></td>
	  </tr>
	  <tr align="right" valign="bottom">
	    <td width="59" height="26"><img src="image/plan/save.gif" name="saveplan" value="Save Plan" onclick="savePlan()" width="50" height="19" style="cursor:pointer"/></td>
	    <td width="61" height="26"><img src="image/plan/delete.gif" name="deleteplan" value="Delete Plan" onclick="deletePlan()" width="55" height="19" style="cursor:pointer"/></td>
	    <td width="60" height="26"><img src="image/plan/back.gif" name="back" value="Back" width="50" height="19" style="cursor:pointer" onclick="window.location.href='PersonalSpace.jsp?userid='+userid;"/></td>
	  </tr>
	  </form>
    </table>
	</td>
    <td width="63" rowspan="2" align="left" valign="top">&nbsp;</td>
    <td width="706" height="38" align="left" valign="top">
      <input id="address" name="address" type="text" value="Paris" size="20" valign="top"/>
      <img src="image/plan/search.gif" value="Search" onClick="showAddress(document.getElementById('address').value)" width="50" height="20" valign="bottom" style="cursor:pointer"/>
      <div id="Layer1" style="position:relative; width:138px; height:26px; z-index:1; left: 510px; top: -23px;"><img src="image/plan/generatePlan.gif" width="130" height="19" style="cursor:pointer" onclick="window.location.href='FinalSchedule.jsp?type=1&planid='+planid;"/></div>
    </td>
  </tr>
  <tr>
    <td align="left" valign="top">
	<div id = "map_canvas" style = "position:absolute; left:294px; top:450px;">map_canvas</div>
	</td>
  </tr>
  <tr>
    <td width="1000" height="109" colspan="4"><img src="image/plan/bottom.gif" width="1000" height="109"/></td>
  </tr>
</table>
</body>
</html>
